<template>
  <!-- 最新地震速报信息 -->
  <div class="sub-content-info">
    <div class="title1" style="margin-top:80px;">最新地震事件</div>
    <div style="display:flex">
      
      <div class="cube-bg" style="">
        <div class="cube-icon img-bounce">
          <li class="li-yq-last"><div class="yq-last" id="yq-last" v-if="lastCatalogDataList.length > 0">{{lastCatalogDataList[lastCatalogDataList.length-1]['m']}}</div></li>
        </div>
      </div>
      <div>
        <div style="display:flex">
          <div>
            <img class="area-icon" src="@/assets/img/area.png" alt="">
          </div>
          <div style="margin-bottom:0%;">
            <div class="subtitle">发震时刻</div>
            <div class="content" v-if="lastCatalogDataList.length > 0">{{lastCatalogDataList[lastCatalogDataList.length-1]['o_time']}}</div>
          </div>
        </div>
        <div style="display:flex;margin-bottom:0%">
          <div>
            <img class="build-icon" src="@/assets/img/area.png" alt="">
          </div>
          <div>
            <div class="subtitle">震中地名</div>
            <div class="content" v-if="lastCatalogDataList.length > 0">{{lastCatalogDataList[lastCatalogDataList.length-1]['loc_name']}}</div>
          </div>
        </div>
        <div style="display:flex">
          <div>
            <img class="area-icon" src="@/assets/img/area.png" alt="">
          </div>
          <div style="margin-bottom:0%;">
            <div class="subtitle">震中位置</div>
            <div class="content" v-if="lastCatalogDataList.length > 0">经纬度: {{lastCatalogDataList[lastCatalogDataList.length-1]['lon']}}, {{lastCatalogDataList[lastCatalogDataList.length-1]['lat']}},深度: {{lastCatalogDataList[lastCatalogDataList.length-1]['depth']}}km</div>
          </div>
        </div>
        <div style="display:flex">
          <div>
            <img class="area-icon" src="@/assets/img/area.png" alt="">
          </div>
          <div style="margin-bottom:0%;">
            <div class="subtitle">震中距离</div>
            <div class="content" v-if="lastCatalogDataList.length > 0">{{lastCatalogDataList[lastCatalogDataList.length-1]['distance']}}km</div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'lastEQR1',
  props:{
        lastCatalogDataList:{
            type:Array,  //类型判断
            default:[]    //默认值
        }
  },
  data() {
        return {
        }
  },
  methods: {
  },
  // 调用各个数据方法
    mounted() {
        
    },
}
</script>
<style>
.sub-content-info .title1{
	font-family: SourceHanSansCN-Bold;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 34px;
	letter-spacing: 1px;
	color: #b1eded;
	margin-top: 8px;
	background: url(@/assets/img/sub_title_bg.png);
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	width: 300px;
	height: 38px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.sub-content-info .subtitle {
  font-size: 14px;
  color: #b1eded;
  margin-bottom: 5px;
}

.sub-content-info .content {
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  margin: 0 0;
}

.sub-content-info .unit {
  font-size: 14px;
  line-height: 28px;
  color: #b1eded;
}

.sub-content-info .area-icon,
.sub-content-info .build-icon {
  width: 17px;
  height: 13px;
  margin-right: 11px;
}

.sub-content-info .cube-bg{
  position:relative; 
  width:32%;
  background: url(../../../assets/img/light-bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  margin-right: 20px;
}

.sub-content-info .light-bg img {
  width: 287px;
  height: 202px;
  margin-top: 10%;
}

.sub-content-info .cube-icon img {
  width: 121px;
  height: 123px;
  position: absolute;
  top: 15%;
  left: 10%;
}


.sub-content-info .school-title {
  color: #b1eded;
  font-size: 14px;
  margin-left: 10px;
}

.sub-content-info .school-num {
  color: #b1eded;
  font-size: 25px;
  padding: 0 7px
}

.sub-content-info .static-bg {
  margin-top: 12px;
  background: url(../../../assets/img/static-bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  width: 206px;
  height: 66px;
}

.static-bg .name {
  color: #b1eded;
  font-size: 14px;
  text-align: center;
}

.bar-chart canvas {
  width: 450px !important;
  height: 300px !important;
  left: 6% !important;
  top: -15% !important;
}

/* 分割线 */
.divider{
	height:1px;
	background-color: #528693;
	width:100%;
}

/* 图片弹跳 */
.img-bounce{
	animation: bounce 2s linear infinite;
	-moz-animation: bounce 2s linear infinite; /* Firefox */
	-webkit-animation: bounce 2s linear infinite; /* Safari 和 Chrome */
	-o-animation: bounce 2s linear infinite; /* Opera */
}
@keyframes bounce {
	25% {transform: translateY(-5px);}
	50%, 100% {transform: translateY(0);}
	75% {transform: translateY(5px);}
}
@-moz-keyframes bounce /* Firefox */ {
	25% {transform: translateY(-5px);}
	50%, 100% {transform: translateY(0);}
	75% {transform: translateY(5px);}
}
@-webkit-keyframes bounce /* Safari 和 Chrome */ {
	25% {transform: translateY(-5px);}
	50%, 100% {transform: translateY(0);}
	75% {transform: translateY(5px);}
}
@-o-keyframes bounce /* Opera */ {
	25% {transform: translateY(-5px);}
	50%, 100% {transform: translateY(0);}
	75% {transform: translateY(5px);}
}

.li-yq-last {
    width: 124px;
  height: 124px;
  position: absolute;
  top: 15%;
  left: 10%;
}

.yq-last {
    width: 124px;
    height: 124px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-family: electronicFont;
    color: red;
}

.yq-last:before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background: url(../../../assets/img/img1.png) center center;
    border-radius: 100px;
    background-size: 100% 100%;
    opacity: .3;
    left: 0;
    top: 0;
    /*animation: myfirst4 30s infinite linear;*/
}

.yq-last:after {
    position: absolute;
    width: 86%;
    background: url(../../../assets/img/img2.png) center center;
    border-radius: 100px;
    background-size: 100% 100%;
    opacity: .3;
    height: 86%;
    content: "";
    left: 7%;
    top: 7%;
    /*animation: myfirst3 30s infinite linear;*/
}

@keyframes myfirst3 {
    to {
        transform: rotate(-360deg)
    }
}

@keyframes myfirst4 {
    to {
        transform: rotate(360deg)
    }
}
</style>